---
slug: ../../TabContainer
---

import Basic from "../../../_samples/main/TabContainer/Basic/Basic.md";
import TextOnlyTabs from "../../../_samples/main/TabContainer/TextOnlyTabs/TextOnlyTabs.md";
import TabLayout from "../../../_samples/main/TabContainer/TabLayout/TabLayout.md";
import TabLayoutInline from "../../../_samples/main/TabContainer/TabLayoutInline/TabLayoutInline.md";
import OverflowMode from "../../../_samples/main/TabContainer/OverflowMode/OverflowMode.md";
import OverflowModeStartAndEnd from "../../../_samples/main/TabContainer/OverflowModeStartAndEnd/OverflowModeStartAndEnd.md";
import NestedTabs from "../../../_samples/main/TabContainer/NestedTabs/NestedTabs.md";
import ReorderTabs from "../../../_samples/main/TabContainer/ReorderTabs/ReorderTabs.md";
import ReorderTabsMaxNestingLevel from "../../../_samples/main/TabContainer/ReorderTabsMaxNestingLevel/ReorderTabsMaxNestingLevel.md";
import ReorderTabsFixedTabs from "../../../_samples/main/TabContainer/ReorderTabsFixedTabs/ReorderTabsFixedTabs.md";
import TransparentDesign from "../../../_samples/main/TabContainer/TransparentDesign/TransparentDesign.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Tab Layout

The tabLayout is "Standard" by default:
<TabLayout />
<br />
It can be switched to "Inline":
<TabLayoutInline />

### Text-only Tabs
<TextOnlyTabs />

### Nested Tabs
<NestedTabs />

### Tabs Overflow Mode

The overflowMode is "End" by default:
<OverflowMode />
<br />
It can be switched to "StartAndEnd":
<OverflowModeStartAndEnd />

### Reorder Tabs
<ReorderTabs />

### Reorder Tabs with Max Nesting Level
<ReorderTabsMaxNestingLevel />

### Reorder Tabs with Fixed Tabs
<ReorderTabsFixedTabs />

### Transparent design

The inner TabContainer has headerBackgroundDesign and contentBackgroundDesign set to "Transparent":
<TransparentDesign />
